<template>
  <a-card :bordered="false">
    <a-spin :spinning="confirmLoading">
      <div style="display: flex">
        <div style="width: 100px; line-height: 32px; font-weight: bold; color: #000">{{$t('取爆米花')}}</div>
        <j-form-container style="width: 500px">
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  :label="$t('服务器地址')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="popperThirdUrl"
                >
                  <a-input v-model="model.popperThirdUrl" :placeholder="$t('请输入第三方爆米花服务器地址')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  :label="$t('appId')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="popperThirdAppId"
                >
                  <a-input v-model="model.popperThirdAppId" :placeholder="$t('请输入第三方爆米花应用appId')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item
                  :label="$t('appKey')"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  prop="popperThirdAppKey"
                >
                  <a-input v-model="model.popperThirdAppKey" :placeholder="$t('请输入第三方爆米花应用密钥appKey')"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="17" :offset="5">
                <a-button v-enable-if="'BisSysParameterController:edit'" type="primary" :disabled="confirmLoading" @click="submitForm">{{$t('保存')}}</a-button>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </div>
    </a-spin>
  </a-card>
</template>
<script>
import { getAction,httpAction } from '../../api/manage'
import axios from 'axios'
import Vue from 'vue'
import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'

export default {
  name: 'ThirdSetting',
  mixins: [],
  components: {},
  data() {
    return {
      confirmLoading: false,
      model: {
        urlKey:'',
        popperThirdUrl: '',
        idKey:'',
        popperThirdAppId:'',
        keyKey: '',
        popperThirdAppKey: '',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      validatorRules: {
        popperThirdUrl: [{ required: true, message: this.$t('请输入第三方爆米花服务器地址') }],
        popperThirdAppId: [{ required: true, message: this.$t('请输入第三方爆米花应用appId') }],
        popperThirdAppKey: [{ required: true, message: this.$t('请输入第三方爆米花应用密钥appKey') }],
      },
      url: {
        list: '/bis/bisSysParameter/queryByName',
      }
    }
  },
  created() {
    this.getInfo()
  },
  computed: {
    tokenHeader() {
      let head = { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) }
      let tenantid = Vue.ls.get(TENANT_ID)
      if (tenantid) {
        head['tenant-id'] = tenantid
      }
      return head
    },
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    getInfo() {
      axios.all([this.fun1(), this.fun2(), this.fun3()]).then(
        axios.spread((r1, r2, r3) => {
          if (r1.success) {
            this.model.urlKey = r1.result.id
            this.model.popperThirdUrl = r1.result.svalue
          }
          if (r2.success) {
            this.model.idKey = r2.result.id
            this.model.popperThirdAppId = r2.result.svalue
          }
          if (r3.success) {
            this.model.keyKey = r3.result.id
            this.model.popperThirdAppKey = r3.result.svalue
          }
        })
      )
    },
    fun1() {
      return getAction('/bis/bisSysParameter/queryByName', { name: 'popperThirdUrl' })
    },
    fun2() {
      return getAction('/bis/bisSysParameter/queryByName', { name: 'popperThirdAppId' })
    },
    fun3() {
      return getAction('/bis/bisSysParameter/queryByName', { name: 'popperThirdAppKey' })
    },
    submitForm() {
      const that = this
      // 触发表单验证
      that.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = '/bis/bisSysParameter/saveBatch'
          let method = 'post'
          let query = []
          query.push({
            id: that.model.urlKey ? that.model.urlKey : '',
            name: 'popperThirdUrl',
            svalue: that.model.popperThirdUrl,
            comment: '第三方爆米花服务器地址'
          })
          query.push({
            id: that.model.idKey ? that.model.idKey : '',
            name: 'popperThirdAppId',
            svalue: that.model.popperThirdAppId,
            comment: '第三方爆米花应用appId'
          })
          query.push({
            id: that.model.keyKey ? that.model.keyKey : '',
            name: 'popperThirdAppKey',
            svalue: that.model.popperThirdAppKey,
            comment: '第三方爆米花应用密钥appKey'
          })
          httpAction(httpurl, query, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.getInfo()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>